<template>
	<view class="content">
		<view class="reservation-form">
			<view class="reservation-form-li reservation-form-li-radio flex po">
				<view class="reservation-form-li-left">
					类型
				</view>
				<view class="reservation-form-li-right">
					<radio-group name="radio" @change="onType">
						<label>
							<radio class="store-radio" style="transform:scale(0.7)" value="1" color="#e83e41" :checked="type==1 ? true : false" />
							个人
						</label>
						<label>
							<radio class="store-radio" style="transform:scale(0.7)" value="2" color="#e83e41" :checked="type==2 ? true : false" />
							企业
						</label>
					</radio-group>
				</view>
			</view>
			<view class="reservation-form-li flex po">
				<view class="reservation-form-li-left">
					姓名
				</view>
				<view class="reservation-form-li-right">
					<input v-model="owner_name" placeholder-style="color:#c3c3c3" class="uni-input" type="text" placeholder="账户人姓名" />
				</view>
			</view>
			<view class="reservation-form-li flex po ">
				<view class="reservation-form-li-left">
					身份证号码
				</view>
				<view class="reservation-form-li-right">
					<input v-model="owner_id" placeholder-style="color:#c3c3c3" class="uni-input" type="idcard" placeholder="请输入身份证号码" />
				</view>
			</view>
			<view class="reservation-form-li flex po">
				<view class="reservation-form-li-left">
					卡号
				</view>
				<view class="reservation-form-li-right">
					<input v-model="card_no" placeholder-style="color:#c3c3c3" class="uni-input" type="number" placeholder="请填写银行卡号" />
				</view>
			</view>

			<view class="reservation-form-li flex po" v-if="type==2">
				<view class="reservation-form-li-left">
					开户许可证
				</view>
				<view class="reservation-form-li-right right">
					<image class="reservation-form-li-right-img" :src="image ? image : '../../../static/jia.png'" @click="chooseImage()" /><!-- style="width: 100rpx; height: 100rpx;margin: 0 30px 0 0;" -->
				</view>
			</view>

		</view>

		<view class="foot" @click="post">
			确认
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		computed: {
			...mapState(['token'])
		},
		data() {
			return {
				type: 1,
				owner_id: '',
				owner_name: '',
				card_no: '',
				image: ''
			}
		},
		methods: {
			...mapMutations(['getNetworkType', 'vuexRequest', 'vuexUploadFile']),
			onType(e) {
				this.type = e.target.value
			},
			// 上传图片
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log('chooseImage success, temp path is', res.tempFilePaths[0])
						var imageSrc = res.tempFilePaths[0]
						uni.showLoading({
							title: '上传中'
						});
						this.vuexUploadFile({
							url: '/api/v2/file/images?access-token=' + this.token,
							name: 'file',
							fileType: 'image',
							filePath: imageSrc,
							success: (res) => {
								uni.hideLoading()
								this.image = res.data.data.url
								uni.showToast({
									icon: 'none',
									title: res.data.message,
									position: 'bottom'
								})
							},
							fail: (err) => {
								uni.hideLoading()
								uni.showToast({
									icon: 'none',
									title: err.data.message,
									position: 'bottom'
								})
							},
						})
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				})
			},
			// 提交保存
			post() {
				let regName = /^[\u4e00-\u9fa5]{2,4}$/;
				let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

				if (!this.owner_name) {
					uni.showToast({
						title: "请输入账户人姓名",
						icon: 'none',
						position: 'bottom'
					})
					return !1
				}
				// if(!regName.test(this.owner_name)){
				// 	uni.showToast({
				// 		title: "输入的账户人姓名有误",
				// 		icon: 'none',
				// 		position:'bottom'
				// 	})
				// 	return !1
				// }
				if (!this.owner_id) {
					uni.showToast({
						title: "请输入身份证号码",
						icon: 'none',
						position: 'bottom'
					})
					return !1
				}
				if (reg.test(this.owner_id) === false) {
					uni.showToast({
						title: "身份证输入不合法",
						icon: 'none',
						position: 'bottom'
					})
					return !1
				}

				if (!this.card_no) {
					uni.showToast({
						title: "请填写银行卡号",
						icon: 'none',
						position: 'bottom'
					})
					return !1
				}

				let data = {
					owner_name: this.owner_name,
					owner_id: this.owner_id,
					card_no: this.card_no,
					type: this.type
				}

				if (this.type == 2) {
					if (this.image == '') {
						uni.showToast({
							title: "请上传企业开户许可证",
							icon: 'none',
							position: 'bottom'
						})
						return !1
					}

					data.image = this.image
				}

				this.vuexRequest({
					url: '/api/v2/member/bank?access-token=' + this.token,
					method: 'POST',
					data: data,
					success: (res) => {
						uni.showToast({
							title: '保存成功',
							icon: 'none',
							position: 'bottom'
						})
						uni.navigateBack()
					},
					fail: (err) => {
						uni.showToast({
							title: err.data.message,
							position: 'bottom'
						})
					},
				})
			}
		}
	}
</script>

<style>
	.mt1 {
		margin: 20upx 0 0 0;
	}

	.before:before {
		position: absolute;
		z-index: 10;
		right: 30upx;
		top: 50%;
		margin: -8upx 0 0 0;
		content: '';
		display: block;
		width: 16upx;
		height: 16upx;
		border: solid 2upx #989898;
		transform: rotate(45deg);
		border-left: none;
		border-bottom: none;
	}

	.flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.po {
		position: relative;
	}

	.po:after {
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		-ms-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.uni-input {
		margin: 0;
	}

	.reservation-form-li {
		background: #FFFFFF;
		padding: 10upx 30upx;
	}

	.reservation-form-li-right {
		width: 75%;
		position: relative;
	}

	.store-ad {
		width: 750upx;
		height: 356upx;
	}

	.reservation-form-li-radio {
		padding: 30upx;
	}

	.foot {
		color: #FFFFFF;
		width: 85%;
		height: 100upx;
		background: #f54336;
		text-align: center;
		line-height: 100upx;
		border-radius: 100px;
		margin: 80upx auto 0 auto;
	}

	.right {
		text-align: right;
		height: 100upx;
		padding: 20upx 0;
	}

	.reservation-form-li-right-img {
		position: absolute;
		width: 75rpx;
		height: 75rpx;
		top: 50%;
		right: 30rpx;
		transform: translateY(-50%);
	}
</style>
